<template>
  <div class="main-area">
    <div class="main-area-item">
      <div style="margin-bottom:10px">字段信息</div>
      <div>
         <el-select size="small" v-model="form.execType" style="width:80%;margin-right:8px;" @change="execTypeChange">
          <el-option label="flink" value="flink"></el-option>
          <el-option label="spark" value="spark"></el-option>
          <el-option label="doris" value="doris"></el-option>
        </el-select>
       </div>
      <div>
        {{ tableSchema }}
      </div>
    </div>


  </div>
</template>
<script>
import { tableSchema } from '@/api/dbAndTable.js'
export default {
  name: '',
  components: {},
  props: {
    currentCatalog: {
      type: Object,
      required: true
    },
    currentTable: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      loadingC: false,
      loadingP: false,
      tableSchema: [],
      execType: 'flink',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTableSchema()
  },
  methods: {
    getTableSchema() {
      this.loadingC = true
      tableSchema({
        ...this.currentCatalog,
        databaseName: this.currentTable.pLabel,
        tableName: this.currentTable.label,
        execType: this.execType,
      }).then(res => {
        this.tableSchema = res.data
      }).finally(() => {
        this.loadingC = false
      })
    },
    execTypeChange(value) {
      this.getTableSchema();
    }
  }
}
</script>
<style lang="scss" scoped>
.main-area {
  width: 100%;
  display: flex;

  .main-area-item {
    flex: 1;
    margin: 10px;
  }
}
</style>
